<template>
    <PageLayout>
        <!-- 页面头部 -->
        <section class="py-12 bg-gradient-to-r from-primary/5 to-secondary/5">
            <div class="container mx-auto px-4 text-center">
                <h1 class="text-[clamp(2rem,4vw,3rem)] font-serif font-bold mb-4">投稿分享</h1>
                <p class="text-neutral-600 max-w-2xl mx-auto">
                    分享你的生活小 Life，让更多人感受到生活的美好与温暖
                </p>
            </div>
        </section>

        <!-- 投稿指南 -->
        <section class="py-16">
            <div class="container mx-auto px-4">
                <div class="max-w-4xl mx-auto">
                    <!-- 欢迎词 -->
                    <div class="text-center mb-12">
                        <h2 class="text-2xl font-bold mb-4">欢迎来到 Life 拾光</h2>
                        <p class="text-neutral-600 max-w-2xl mx-auto leading-relaxed">
                            这里不仅是我个人的记录空间，更希望成为一个温暖的社区。如果你也有生活中的温暖瞬间、美好发现或者触动心灵的小故事，非常欢迎与我们分享。每一个平凡的故事都值得被看见，每一束光都值得被记录。
                        </p>
                    </div>

                    <!-- 投稿类型 -->
                    <div class="grid md:grid-cols-3 gap-8 mb-16">
                        <div class="bg-white rounded-xl p-6 shadow-sm text-center">
                            <div
                                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-camera text-2xl text-primary"></i>
                            </div>
                            <h3 class="font-bold mb-2">生活瞬间</h3>
                            <p class="text-sm text-neutral-600 mb-4">分享你镜头下的美好时刻，可以是日常生活、旅行见闻、自然风光等</p>
                            <ul class="text-xs text-neutral-500 text-left space-y-1">
                                <li>• 高清图片 (建议1080p以上)</li>
                                <li>• 简短的故事描述</li>
                                <li>• 拍摄时间和地点</li>
                            </ul>
                        </div>

                        <div class="bg-white rounded-xl p-6 shadow-sm text-center">
                            <div
                                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-quote-left text-2xl text-primary"></i>
                            </div>
                            <h3 class="font-bold mb-2">美好文字</h3>
                            <p class="text-sm text-neutral-600 mb-4">分享触动你心灵的句子、原创文字或者读书感悟</p>
                            <ul class="text-xs text-neutral-500 text-left space-y-1">
                                <li>• 原创文字或经典语录</li>
                                <li>• 注明出处和作者</li>
                                <li>• 分享感悟和心得</li>
                            </ul>
                        </div>

                        <div class="bg-white rounded-xl p-6 shadow-sm text-center">
                            <div
                                class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                                <i class="fa fa-heart text-2xl text-primary"></i>
                            </div>
                            <h3 class="font-bold mb-2">生活感悟</h3>
                            <p class="text-sm text-neutral-600 mb-4">分享你的生活感悟、成长故事或者温暖的回忆</p>
                            <ul class="text-xs text-neutral-500 text-left space-y-1">
                                <li>• 真实的生活体验</li>
                                <li>• 积极正面的内容</li>
                                <li>• 能够引起共鸣的故事</li>
                            </ul>
                        </div>
                    </div>

                    <!-- 投稿须知 -->
                    <div class="bg-neutral-50 rounded-xl p-8 mb-12">
                        <h3 class="text-xl font-bold mb-6">投稿须知</h3>
                        <div class="grid md:grid-cols-2 gap-8">
                            <div>
                                <h4 class="font-semibold text-primary mb-3">✅ 我们欢迎</h4>
                                <ul class="space-y-2 text-sm text-neutral-600">
                                    <li>• 原创内容，真实的生活记录</li>
                                    <li>• 积极正面，能传递温暖的内容</li>
                                    <li>• 有故事性，能引起共鸣的分享</li>
                                    <li>• 高质量的图片和文字</li>
                                    <li>• 尊重他人，文明友善的表达</li>
                                </ul>
                            </div>
                            <div>
                                <h4 class="font-semibold text-red-500 mb-3">❌ 我们不接受</h4>
                                <ul class="space-y-2 text-sm text-neutral-600">
                                    <li>• 抄袭或盗用他人作品</li>
                                    <li>• 负面消极，传播焦虑的内容</li>
                                    <li>• 商业广告或营销内容</li>
                                    <li>• 涉及政治、宗教争议的内容</li>
                                    <li>• 不当或有害的信息</li>
                                </ul>
                            </div>
                        </div>
                    </div>

                    <!-- 投稿流程 -->
                    <div class="mb-12">
                        <h3 class="text-xl font-bold mb-6 text-center">投稿流程</h3>
                        <div class="flex flex-col md:flex-row items-center justify-center gap-8">
                            <div class="flex flex-col items-center text-center">
                                <div
                                    class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold mb-3">
                                    1</div>
                                <h4 class="font-semibold mb-2">准备内容</h4>
                                <p class="text-sm text-neutral-600">整理你想分享的内容<br>确保符合投稿要求</p>
                            </div>
                            <i class="fa fa-arrow-right text-neutral-400 hidden md:block"></i>
                            <div class="flex flex-col items-center text-center">
                                <div
                                    class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold mb-3">
                                    2</div>
                                <h4 class="font-semibold mb-2">发送邮件</h4>
                                <p class="text-sm text-neutral-600">通过邮箱或微信<br>发送你的投稿内容</p>
                            </div>
                            <i class="fa fa-arrow-right text-neutral-400 hidden md:block"></i>
                            <div class="flex flex-col items-center text-center">
                                <div
                                    class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold mb-3">
                                    3</div>
                                <h4 class="font-semibold mb-2">审核回复</h4>
                                <p class="text-sm text-neutral-600">我会仔细阅读并<br>在3天内回复你</p>
                            </div>
                            <i class="fa fa-arrow-right text-neutral-400 hidden md:block"></i>
                            <div class="flex flex-col items-center text-center">
                                <div
                                    class="w-12 h-12 bg-primary text-white rounded-full flex items-center justify-center font-bold mb-3">
                                    4</div>
                                <h4 class="font-semibold mb-2">发布分享</h4>
                                <p class="text-sm text-neutral-600">优质内容将在<br>征得同意后发布</p>
                            </div>
                        </div>
                    </div>

                    <!-- 联系方式 -->
                    <div class="bg-white rounded-2xl p-8 shadow-sm text-center">
                        <h3 class="text-xl font-bold mb-4">联系我</h3>
                        <p class="text-neutral-600 mb-8">
                            准备好分享你的故事了吗？选择你喜欢的方式联系我吧
                        </p>

                        <div class="grid md:grid-cols-2 gap-6 max-w-2xl mx-auto">
                            <!-- 邮箱投稿 -->
                            <div class="bg-gradient-to-br from-primary/5 to-primary/10 rounded-xl p-6">
                                <div class="flex items-center justify-center gap-3 mb-4">
                                    <i class="fa fa-envelope text-2xl text-primary"></i>
                                    <h4 class="font-bold">邮箱投稿</h4>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4">
                                    发送邮件到我的邮箱，详细描述你的投稿内容
                                </p>
                                <div class="space-y-3">
                                    <div class="text-xs text-neutral-500 bg-white/80 px-3 py-2 rounded-lg">
                                        life.shiguang@gmail.com
                                    </div>
                                    <button @click="copyEmail"
                                        class="w-full bg-primary hover:bg-primary/90 text-white py-2 rounded-lg text-sm transition-colors">
                                        {{ emailCopied ? '已复制邮箱!' : '复制邮箱地址' }}
                                    </button>
                                </div>
                            </div>

                            <!-- 微信联系 -->
                            <div class="bg-gradient-to-br from-secondary/5 to-secondary/10 rounded-xl p-6">
                                <div class="flex items-center justify-center gap-3 mb-4">
                                    <i class="fa fa-wechat text-2xl text-secondary"></i>
                                    <h4 class="font-bold">微信联系</h4>
                                </div>
                                <p class="text-sm text-neutral-600 mb-4">
                                    添加我的微信，可以更方便地交流和分享
                                </p>
                                <div class="space-y-3">
                                    <div class="text-xs text-neutral-500 bg-white/80 px-3 py-2 rounded-lg">
                                        lifeshiguang11
                                    </div>
                                    <button @click="copyWechat"
                                        class="w-full bg-secondary hover:bg-secondary/90 text-white py-2 rounded-lg text-sm transition-colors">
                                        {{ wechatCopied ? '已复制微信!' : '复制微信号' }}
                                    </button>
                                </div>
                            </div>
                        </div>

                        <div class="mt-8 p-4 bg-neutral-50 rounded-lg">
                            <p class="text-xs text-neutral-500">
                                💌 收到投稿后，我会仔细阅读每一份内容，并在3个工作日内回复。<br>
                                优质内容将在征得作者同意后，以合适的形式分享到 Life 拾光。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </PageLayout>
</template>

<script setup>
import { ref } from 'vue'
import PageLayout from '@/components/layout/PageLayout.vue'

const emailCopied = ref(false)
const wechatCopied = ref(false)

// 复制邮箱地址
const copyEmail = async () => {
    try {
        await navigator.clipboard.writeText('life.shiguang@gmail.com')
        emailCopied.value = true
        setTimeout(() => {
            emailCopied.value = false
        }, 2000)
    } catch (err) {
        // 降级方案
        const textArea = document.createElement('textarea')
        textArea.value = 'life.shiguang@gmail.com'
        document.body.appendChild(textArea)
        textArea.select()
        document.execCommand('copy')
        document.body.removeChild(textArea)
        emailCopied.value = true
        setTimeout(() => {
            emailCopied.value = false
        }, 2000)
    }
}

// 复制微信号
const copyWechat = async () => {
    try {
        await navigator.clipboard.writeText('lifeshiguang11')
        wechatCopied.value = true
        setTimeout(() => {
            wechatCopied.value = false
        }, 2000)
    } catch (err) {
        // 降级方案
        const textArea = document.createElement('textarea')
        textArea.value = 'lifeshiguang11'
        document.body.appendChild(textArea)
        textArea.select()
        document.execCommand('copy')
        document.body.removeChild(textArea)
        wechatCopied.value = true
        setTimeout(() => {
            wechatCopied.value = false
        }, 2000)
    }
}
</script>